<template>
  <div class="home-container">
   <!-- <div class="home-header">
      <h1 class="welcome-title">欢迎使用智慧管理系统</h1>
      <p class="welcome-subtitle">今天是 {{currentDate}}，祝您工作愉快！</p>
    </div> -->
    <!-- <div class="home-content"> -->
      <mini class="module-card" v-if="hasMini" />
      <kiosk class="module-card" v-if="hasKiosk"/>
      <lora class="module-card" v-if="hasLora"/>
    <!-- </div> -->
  </div>
</template>

<script>
  import kiosk from './kiosk.vue'
  import lora from '../lora/home/home.vue'
  import mini from '../mini/home/home.vue'
  export default {
    name: 'Home',
    components: {
      kiosk,
      lora,
      mini
    },
    data() {
      return {
        currentDate: new Date().toLocaleDateString('zh-CN', {year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'})
      }
    },
    computed: {
      functionList: {
        get () {
          if (this.$store.state.config.backParam.functionList === undefined){
            return []
          }
          return this.$store.state.config.backParam.functionList
        }
      },
      hasKiosk: {
        get () {
          for(var i=0; i< this.functionList.length; i++) {
            if(this.functionList[i] === '导购大屏') {
              return true;
            }
          }
          return false;
        }
      },
      hasLora: {
        get () {
          for(var i=0; i< this.functionList.length; i++) {
            if(this.functionList[i] === '人员定位') {
              return true;
            }
          }
          return false;
        }
      },
      hasMini: {
        get () {
          for(var i=0; i< this.functionList.length; i++) {
            if(this.functionList[i] === '小程序') {
              return true;
            }
          }
          return false;
        }
      }
    },
    methods: {

    }
  }
</script>

<style scoped lang="less">
.home-container {
  // padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  border-radius: 10px;
  min-height: 100%;
}

.home-header {
  text-align: center;
  margin-bottom: 30px;

  .welcome-title {
    font-size: 28px;
    color: #303133;
    margin-bottom: 10px;
    font-weight: 600;
  }

  .welcome-subtitle {
    font-size: 16px;
    color: #606266;
  }
}

.home-content {
  .module-card {
    margin-bottom: 30px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
    }
  }
}
</style>
